<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8"/>
    <title>Auto-player instantiation example, showing how to obtain a reference to the MediaPlayer</title>

    <script src="../../dist/dash.all.debug.js"></script>
    <!--dash.all.min.js should be used in production over dash.all.debug.js
        Debug files are not compressed or obfuscated making the file size much larger compared with dash.all.min.js-->
    <!--<script src="../../dist/dash.all.min.js"></script>-->

    <script class="code">
        var player;

        function init()
        {
            player = dashjs.MediaPlayerFactory.create(document.querySelector(".dashjs-player"));
            setInterval(updateStats,500)
        }

        function updateStats()
        {
            document.querySelector("#stats").innerHTML = "Buffer level " + player.getBufferLength() + "s";
        }
    </script>
    <style>
        video {
            width: 640px;
            height: 360px;
        }
    </style>
    </head>
    <body>
        <div class="code">
            <video class="dashjs-player" autoplay controls>
                <source src="https://dash.akamaized.net/envivio/EnvivioDash3/manifest.mpd" type="application/dash+xml"/>
            </video>
        </div>
        <div class="code">
            <span id="stats"></span>
        </div>

        <script>
            document.addEventListener("DOMContentLoaded", function () {
                init();
            });
        </script>
        <script src="../highlighter.js"></script>
    </body>
</html>
